<div class="p-5">
  <h4>Notifications</h4>

  <div>
    <ui-select ng-model="newSubscription.destination" ng-disabled="destinations.length == 0">
      <ui-select-match><span ng-bind-html="destinationsDisplay($select.selected)"></span></ui-select-match>
      <ui-select-choices repeat="d in destinations">
        <span ng-bind-html="destinationsDisplay(d)"></span>
      </ui-select-choices>
    </ui-select>
  </div>
  <div class="m-t-5">
    <button class="btn btn-default" ng-click="saveSubscriber()" ng-disabled="destinations.length == 0" style="width:50%;">Add</button>
    <span class="pull-right m-t-5">
      <a href="destinations/new" ng-if="currentUser.isAdmin">Create New Destination</a>
    </span>
  </div>

  <hr/>

  <div>
    <div class="list-group-item" ng-repeat="subscriber in subscribers">
      <span ng-bind-html="destinationsDisplay(subscriber)"></span>
      <button class="btn btn-xs btn-danger pull-right" ng-click="unsubscribe(subscriber)" ng-if="currentUser.isAdmin || currentUser.id == subscriber.user.id">Remove</button>
    </div>
  </div>
</div>
